<template>
  <el-dialog title="预览采购订单合同" :visible.sync="dialogVisible" width="900px"  :close-on-click-modal="false" :append-to-body="true" v-drag2anywhere>
    <div style="display: flex;">
      <div style="display: flex;">
         <div></div>
      </div>
      <div style="text-align: right;">
        <el-button  type="primary"   @click="handleExportdox">下载合同</el-button>
      </div>
    </div>
    <div style="overflow-y: auto; padding:20px; height: 650px;" id="docDom">
      <div style="font-weight: bold;font-size: 25px; line-height: 50px; text-align: center;">采购合同</div>
      <div style="text-align: right;">合同编号:{{formData.reqcode}}</div>
      <el-row>
        <el-col >
          <div>甲方(需方): <span style="text-decoration: underline;">&nbsp;&nbsp;{{formData.buyer}} &nbsp;&nbsp;</span></div>
          <div>乙方(供方): <span style="text-decoration: underline;">&nbsp;&nbsp;{{formData.seller}}&nbsp;&nbsp;</span></div>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="text-indent: 2em;">
          依照《中华人民共和国合同法》是的法律法规，本着诚实守信、互惠互利、共同发展的宗旨和原则，经甲乙双方充分友好协商，达成一致签订本合同。
        </el-col>
      </el-row>
      <!--产品明细-->
      <el-row>
        <el-col >
           <b> 一、产品名称，规格及报价</b>
        </el-col>
        <el-col>
          <table border="1" cellspacing="0" cellpadding="2" style="width: 100%;">
            <tr style="text-align: center;">
              <td>序号</td>
              <td>产品名称</td>
              <td>品牌</td>
              <td>规格型号</td>
              <td>计量单位</td>
              <td>数量</td>
              <td>单价(元)</td>
              <td>总价(元)</td>
              <td>备注</td>
            </tr>
            <tr v-for="(item,index) in formData.goods">
              <td style="text-align: center;">{{index+1}}</td>
              <td style="text-align: center;">{{item.title}}</td>
              <td style="text-align: center;">{{item.brand}}</td>
              <td style="text-align: center;">{{item.model}}</td>
              <td style="text-align: center;">{{item.unit}}</td>
              <td style="text-align: center;">{{item.count}}</td>
              <td style="text-align: center;">{{parseFloat(item.price).toFixed(2)}}</td>
              <td style="text-align: center;">{{parseFloat(item.total).toFixed(2)}}</td>
              <td style="text-align: center; width: 80px;">{{item.dmemo}}</td>
            </tr>
            <tr>
              <td colspan="2" style="text-align: right">合计(大写):</td>
              <td colspan="3" style="text-align: center;">{{upperCaseAmount(parseFloat(formData.sum).toFixed(2))}}</td>
              <td colspan="2" style="text-align: center;">合计金额(元):</td>
              <td colspan="2" style="padding-left: 4px; text-align: center;">{{parseFloat(formData.sum).toFixed(2)}}</td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <!--dd-->
      <el-row>
        <el-col >
            <b>  二、交货方式</b>
        </el-col>
        <el-col>
          <div style="text-indent: 2em;"> 交货地点: 客户指定地点</div>
          <div style="text-indent: 2em;"> 交货日期: 合同签订日期后1个自然日内</div>
          <div style="text-indent: 2em;"> 运输方式: {{formData.yunfei}}</div>
        </el-col>

      </el-row>
      <el-row>
        <el-col >
            <b>  三、付款</b>
        </el-col>
        <el-col>
          <div style="text-indent: 2em;"> 付款方式: 一次性支付合同全款，{{formData.paytype}}</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col >
             <b> 四、质量保证</b>
        </el-col>
        <el-col>
          <div style="text-indent: 2em;">4.1 供应商应确保所提供的商品符合相关法律法规的要求，并且符合合同约定的质量标准。</div>
          <div style="text-indent: 2em;">4.2 采购方有权对所购商品进行质量检验，如有不合格的情况，供应商应负责修理、更换或退还货物。</div>
          <div style="text-indent: 2em;">4.2 供应商保证所供应商品来源合法、无任何法律纠纷和质量问题，如所供产品与第三方出现纠纷，由此引起的一切法律后果均由乙方承担。</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col >
             <b> 第五条 违约责任</b>
        </el-col>
        <el-col>
          <div style="text-indent: 2em;">5.1 任何一方违反本合同的约定，应承担相应的违约责任。</div>
          <div style="text-indent: 2em;">5.2 若因不可抗力等不可预见的原因导致无法履行本合同的，双方不承担违约责任。</div>
        </el-col>
      </el-row>


      <el-row>
        <el-col >
             <b> 第六条 保密条款</b>
        </el-col>
        <el-col>
          <div style="text-indent: 2em;">本合同签订后，双方均应保守商业秘密，不得将相关商业信息泄露给任何第三方。</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col >
             <b> 第七条 争议解决</b>
        </el-col>
        <el-col>
          <div style="text-indent: 2em;">双方因本合同发生的争议应友好协商解决；如协商不成，任何一方可向所在地法院提起诉讼</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col >
             <b> 第八条 其他条款</b>
        </el-col>
        <el-col>
          <div style="text-indent: 2em;">8.1 除本合同约定之条款外，双方还可以根据实际情况在附加协议中约定其他内容，附加协议与本合同具有同等法律效力</div>
          <div style="text-indent: 2em;">8.2 本合同一式两份，供应商和采购方各持一份，具有同等法律效力</div>
          <div style="text-indent: 2em;">8.3 本合同未尽事宜，按双方协商决定</div>
        </el-col>
      </el-row>

      <table border="0" cellspacing="0" style="width: 100%;">
        <tr>
          <td>甲方(采购方)：{{formData.buyer}}</td>
          <td>乙方(供应商)：{{formData.seller}}</td>
        </tr>
        <tr>
          <td>签字约代表: {{this.formData.requester}}</td>
          <td>签字约代表:</td>
        </tr>
        <tr>
          <td>日期:{{formData.reqdate.split(" ")[0]}}</td>
          <td>日期:{{formData.reqdate.split(" ")[0]}}</td>
        </tr>
      </table>
     </div>
  </el-dialog>
</template>

<script>
  import FileSaver from 'file-saver'
  import htmlDocx from "html-docx-js/dist/html-docx"
  export default {
    data() {
      return {
        formData: {
          reqcode: '',
          reqdate:'',
          buyer:'',
          seller:'',
          requester:''
        },
        dialogVisible: false
      }
    },
    methods: {
      upperCaseAmount(money){
         //  将数字金额转换为大写金额
               var cnNums = new Array(
                 "零",
                 "壹",
                 "贰",
                 "叁",
                 "肆",
                 "伍",
                 "陆",
                 "柒",
                 "捌",
                 "玖"
               ); //汉字的数字
               var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
               var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
               var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
               var cnInteger = "整"; //整数金额时后面跟的字符
               var cnIntLast = "元"; //整数完以后的单位
               //最大处理的数字
               var maxNum = 999999999999999.9999;
               var integerNum; //金额整数部分
               var decimalNum; //金额小数部分
               //输出的中文金额字符串
               var chineseStr = "";
               var parts; //分离金额后用的数组，预定义
               if (money == "") {
                 return "";
               }

               money = parseFloat(money);
               if (money >= maxNum) {
                 //超出最大处理数字
                 return "超出最大处理数字";
               }
               if (money == 0) {
                 chineseStr = cnNums[0] + cnIntLast + cnInteger;
                 return chineseStr;
               }

               //四舍五入保留两位小数,转换为字符串
               money = Math.round(money * 100).toString();
               integerNum = money.substr(0, money.length - 2);
               decimalNum = money.substr(money.length - 2);

               //获取整型部分转换
               if (parseInt(integerNum, 10) > 0) {
                 var zeroCount = 0;
                 var IntLen = integerNum.length;
                 for (var i = 0; i < IntLen; i++) {
                   var n = integerNum.substr(i, 1);
                   var p = IntLen - i - 1;
                   var q = p / 4;
                   var m = p % 4;
                   if (n == "0") {
                     zeroCount++;
                   } else {
                     if (zeroCount > 0) {
                       chineseStr += cnNums[0];
                     }
                     //归零
                     zeroCount = 0;
                     chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                   }
                   if (m == 0 && zeroCount < 4) {
                     chineseStr += cnIntUnits[q];
                   }
                 }
                 chineseStr += cnIntLast;
               }
               //小数部分
               if (decimalNum != "") {
                 var decLen = decimalNum.length;
                 for (var i = 0; i < decLen; i++) {
                   var n = decimalNum.substr(i, 1);
                   if (n != "0") {
                     chineseStr += cnNums[Number(n)] + cnDecUnits[i];
                   }
                 }
               }
               if (chineseStr == "") {
                 chineseStr += cnNums[0] + cnIntLast + cnInteger;
               } else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
                 chineseStr += cnInteger;
               }
               return chineseStr;
       },
      init(data) {
        console.log(data);
        this.formData = data;
      },
      handleExportdox(){
        var htmlbody=document.getElementById("docDom").innerHTML;
         let converted=htmlDocx.asBlob(htmlbody,{defaultPageSize:{width: '21cm', height: '29.7cm'}});
         FileSaver.saveAs(converted,this.formData.buyer+"与"+this.formData.seller+"采购合同"+this.formData.reqcode+".docx");
      }
    }
  }
</script>

<style>
</style>
